<!-- <template>
  <view class="search focused1" :class="{focused:isSearch}">
    <view class="sinput" >
      <input 
	  type="text" 
	  v-model="keyword" 
	  placeholder="搜索" 
	  confirm-type="search"
	  @focus="hFocus" 
	  @input="doSearch" 
	@confirm="goResult"
	  />
      <button @click="hCancel" >取消</button>
    </view>
    <!-- 搜索状态显示=》下边内容 -->
    <view class="scontent" v-show="isSearch" >
     <block v-show="list.length===0">
     	<view class="title">
     	搜索历史
     	<span class="clear"></span>
     	</view>
     	<!-- 搜索历史 -->
			<view class="history">
			<navigator url="/pages/list/index">小米</navigator>
     	</view>
           </block>
      <!-- 结果 -->
      <scroll-view scroll-y class="result" v-show="isSearch">
        <navigator :url="'/packone/goods/goods?id='+item.goods_id" v-for="item in list" :key="item.goods_id">{{item.goods_name}}</navigator>
      </scroll-view>
    </view>
  </view>
</template>
 -->
 <template>
 	<!-- 如果组件输入框获取焦点，就添加focused类 
 		:class="{类名：boolean值}"
 		如果boolean值为true就有这个类
 	-->
   <view class="search" :class="{focused: isSearch}">
     <view class="sinput">
       <input
 			type="text"
 			@focus="hFocus"
 			v-model="keyword"
 			@input="searchPrd"
 			@confirm="goResult"
 			confirm-type="search"
 			placeholder="搜索" />
       <button @click="hCancel">取消</button>
     </view>
     <!-- 
 			如果是出于搜索状态显示，下面的内容是可见的
 		-->
     <view class="scontent" v-show="isSearch">
 			<block v-show="list.length===0">
 				<view class="title">
 					搜索历史
 					<span class="clear" @click="clearHistory"></span>
 				</view>
 				<!-- 搜索历史 -->
 				<view class="history">
 					<navigator url="'/pages/list/list?id='+item" v-for="(item,index) in history" :key="index">{{item}}</navigator>
 				</view>
       </block>
 			<!-- 结果 -->
       <scroll-view v-show="list.length" scroll-y class="result">
         <navigator 
 					v-for="item in list"
 					:key="item.goods_id"
 					:url="'/packone/goods/goods?id=' + item.goods_id">{{item.goods_name}}</navigator>
       </scroll-view>
     </view>
   </view>
 </template>
 
<script>
	export default {
		data() {
			return {
			isSearch: false,
			keyword:"",
			list:[],
			history:uni.getStorageSync('history')||[]
			}
		},
		methods: {
				clearHistory(){
					uni.clearStorageSync('history')
					this.history=[]
				},
			// 搜索结果页
			goResult() {
				
					// url: '/packone/list/list?query=' + this.keyword
					if(!this.keyword.trim()){
						return  this.history=[]
					}
					this.history.push(this.keyword)
					this.history = [...new Set(this.history)]
					uni.setStorageSync('history',this.history)
					uni.navigateTo({
					    url: "/packone/list/list?query="+this.keyword
					  });
					console.log(this.history)
				
			},
			// 搜索关键字变化了
			searchPrd(){
				if(this.timerId) {
					clearTimeout(this.timerId)
				}
				
				this.timerId = setTimeout(async () => {
					
					const keyword = this.keyword
					if(keyword.trim() === ''){
						this.list = []
						return 
					}
					const res = await this.request({
						url: '/goods/search',
						data: {
							query: keyword
						}
					})
					console.log(res)
					this.list = res.data.goods
					
				}, 500)
				
			},
			hFocus() {
				console.log('得到焦点')
				// 给根元素添加focused类？
				this.isSearch = true
				// 通知父组件 - 它自己展开了
				// 隐藏tabBar
				uni.hideTabBar()
				// 设置父组件容器的高度-api拿到
				// console.log(uni.getSystemInfoSync())
				const h = uni.getSystemInfoSync().windowHeight
				this.$emit('setHeight',  h+'px')
			},
			hCancel() {
				this.isSearch = false
				// 显示tabbar
				uni.showTabBar()
				this.$emit('setHeight', 'auto')
				this.keyword=""
				this.list=[]
			}
		}
	}
// export default {
// data() {
// 	return {
		// isSearch: false,
		// keyword:"",
		// list:[],
		// history:uni.getStorageSync('history').data||[]
// 	}
// },
// methods: {
// 	hFocus() {
// 		this.isSearch=true
// 		const height=uni.getSystemInfo().windowHeight
// 		uni.hideTabBar()
// 		console.log(height)
// 		this.$emit('setHeight',height+"px")
// 	},
// 	hCancel() {
// 		this.isSearch=false
// 		uni.showTabBar()
// 		this.$emit('setHeight','auto')
// 		this.list=[]
		// this.keyword=""	
// 	},
// 	async doSearch(){
// 		this.timer&&clearTimeout(this.timer)
// 		this.timer=setTimeout(async ()=>{
// 			if(!this.keyword.trim()){
// 				return  this.list=[]
// 			}
// 			console.log(this.keyword)
// 			const res=await this.request({url:'/goods/qsearch',data:{query:this.keyword}})
// 			console.log(res)
// 			this.list=res.data
// 		},600)
// 	},
// 	clearHistory(){
// 		uni.clearStorageSync('history')
// 		this.history=[]
// 	},
// 	goResult(){
		// if(!this.keyword.trim()){
		// 	return  this.history=[]
		// }
		// this.history.push(this.keyword)
		// this.history = [...new Set(this.history)]
		// uni.setStorageSync('history',this.history)
		// uni.navigateTo({
		//     url: "/packone/list/list?query="+this.keyword
		//   });
		// console.log(this.history)
// 	}
// },
// }
</script>

<style lang="scss" scoped>
// 搜索
.search {
  width:750rpx;
  display: flex;
  flex-direction: column;
  .sinput {
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    background: #ff2d4a;
    position: relative;
    //伪元素
    &::after {
      position: absolute;
      top: 28rpx;
      left: 302rpx;
      content: "";
      width: 44rpx;
      height: 44rpx;
      line-height: 1;
      background-image: url(https://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;
    }
    input {
      background: #fff;
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      color: #bbb;
      border-radius: 5rpx;
    }
    button {
      display: none;
      margin-left: 20rpx;
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      border-radius: 5rpx;
      background: transparent;
      color: #666;
    }
  }
  &.focused {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    .sinput {
      display: flex;
      background: #eee;
      input {
        text-align: left;
        padding-left: 60rpx;
      }
      button {
        display: block;
      }
      &::after {
        left: 30rpx;
      }
    }
  }
  .scontent {
    background: #fff;
    position: relative;

    flex: 1;
    padding: 27rpx;
    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }
    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;
      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      // display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>